<!--
 * @Author: ChunLai
 * @Date: 2022-04-15 10:45:11
 * @LastEditTime: 2025-09-05 09:37:05
 * @Description: 弹窗说明
 * @FilePath: \02.bldinsure\src\components\MsgDescMask.vue
-->
<template>
  <div class="mask">
    <div class="_modal">
      <div class="_modal-header">
        {{ pop9Label }}
      </div>
      <div class="_modal-content">
        <div
          class="txt_space"
          v-html="pop9Desc"
          v-if="pop9Type === 'text'"
        ></div>
        <div class="w100" v-else-if="pop9Type === 'img'">
          <img :src="`${pop9Desc}?v=${new Date().getTime()}`" alt="" />
        </div>
      </div>
      <div
        class="_modal-footer _close"
        @click="$store.commit('common/CLOSE_FIELD_MEAN')"
      >
        我已知晓
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "MsgDescMask",
  data() {
    return {};
  },
  computed: {
    ...mapGetters({
      pop9Label: "common/pop9Label",
      pop9Desc: "common/pop9Desc",
      pop9Type: "common/pop9Type",
    }),
  },
  mounted() {},
  beforeDestroy() {},
  watch: {},
  methods: {},
};
</script>

<style lang="less" scoped>
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;

  ._modal {
    width: 80%;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;

    ._modal-header {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 44px;
      line-height: 16px;
      font-size: 14px;
      padding: 7px 10px;
      text-align: center;
      font-weight: 600;
      color: #242424;
      border-bottom: 3px solid #f1f1f1;
    }

    ._modal-content {
      padding: 10px 14px;
      min-height: 150px;
      max-height: 300px;
      background: #fff;
      font-size: 14px;
      color: #333;
      line-height: 1.5;
      overflow: hidden;
      overflow-y: scroll;
    }

    ._close {
      display: block;
      height: 40px;
      line-height: 40px;
      color: #f54040;
      text-align: center;
      border-top: 1px solid #ebedf0;
    }
  }
}
</style>
